<template>
    <div class="add-clue-dialog-view">

        <el-dialog
                v-model="dialogShow"
                :close-on-click-modal="false"
                width="500px"
                title="新建客户线索"
                @closed="close"
        >

            <el-form
                    :rules="rule"
                    ref="refForm"
                    :model="formData"
                    label-width="100px"
                    size="small"
            >

                <el-form-item label="联系人" prop="contactName">
                    <el-input v-model="formData.contactName" placeholder="请输入联系人"/>
                </el-form-item>

                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"/>
                </el-form-item>

                <el-form-item label="线索来源">
                    <el-select
                            v-model="formData.clueSource"
                            clearable
                            style="width: 100%"
                            placeholder="请选择线索来源">
                        <el-option
                                v-for="item in sourceOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="公司">
                    <el-input v-model="formData.company" placeholder="请输入公司"/>
                </el-form-item>

                <el-form-item
                        style="width: 100%;"
                        label="所在地区"
                        prop="area"
                >
                    <el-cascader
                            ref="cascader"
                            v-model="formData.area"
                            :popper-append-to-body="false"
                            style="width: 100%;"
                            :options="citys"
                            placeholder="请选择所在地区"
                            :props="{ expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
                            clearable
                            @change="areaChange"
                    />
                </el-form-item>

                <el-form-item label="详细地址">
                    <el-input v-model="formData.address" placeholder="请输入详细地址"/>
                </el-form-item>

                <el-form-item label="关联营销任务">
<!--                    <el-select-->
<!--                            v-model="formData.saleTaskId"-->
<!--                            clearable-->
<!--                            style="width: 100%"-->
<!--                            placeholder="请选择关联营销任务">-->
<!--                        <el-option-->
<!--                                v-for="item in taskOptions"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value"-->
<!--                        >-->
<!--                        </el-option>-->
<!--                    </el-select>-->
                    <el-input
                            ref="refInput"
                            v-model="formData.saleTaskNo"
                            placeholder="请输入营销任务"
                            clearable
                            @clear="taskClear"
                            @blur="taskBlur"
                            @focus="taskFocus"
                    />
                </el-form-item>

            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                            class="border-btn"
                            size="small"
                            @click="close"
                    >取消</el-button>
                    <el-button
                            class="main-btn"
                            size="small"
                            type="primary"
                            @click="confirm"
                    >确定</el-button>
                </div>
            </template>
        </el-dialog>

        <chanceTaskDialog ref="taskDialog" @confirm="taskConfirm"/>
    </div>
</template>

<script>
    import area from "../../../../../../../utils/area";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, ref, inject, getCurrentInstance } from 'vue'
    import {crmStore} from "../../../../../store";
    export default defineComponent({
        name: "addClue",
        emits:['success'],
        components:{
            chanceTaskDialog:defineAsyncComponent(
                ()=>import('../../../modules/chanceTaskDialog.vue')
            )
        },
        setup(props,{emit}){
            const checkPhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入联系电话'))
                } else {
                    const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的手机号'))
                    }
                }
            }

            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const sourceOption = crmStore.getters['dictionary/getDictionary']['clue_source']
            const citys = area
            const rule = ref({
                contactName: [
                    {
                        required: true,
                        message:'请输入联系人',
                        trigger: 'blur',
                    },
                ],
                contactPhone: [
                    {
                        required: true,
                        validator: checkPhone,
                        trigger: 'blur',
                    },
                ],
            })
            var data = reactive({
                dialogShow:false,
                refForm:null,
                formData:{
                    contactName:'',
                    contactPhone:'',
                    clueSource:'',
                    company:'',
                    provinceCode:'',
                    cityCode:'',
                    areaCode:'',
                    area:[],
                    address:'',
                    saleTaskId:'',
                    saleTaskNo:'',
                    allocationAgentId:0,
                },
                taskOptions:[],
                taskDialog:null,
                refInput:null,
            })

            const areaChange = (val) => {
                if (!val || !val.length){
                    data.formData.provinceCode = ''
                    data.formData.cityCode = ''
                    data.formData.areaCode = ''
                }
                if (val[0]){
                    data.formData.provinceCode = val[0]
                }
                if (val[1]){
                    data.formData.cityCode = val[1]
                }
                if (val[2]){
                    data.formData.areaCode = val[2]
                }
            }

            const taskConfirm = (val) => {
                console.log(val)
                data.formData.saleTaskId = val.saleTaskId
                data.formData.saleTaskNo = val.taskNo
                data.formData.allocationAgentId = val.id
            }

            const taskBlur = () => {
                // if (!data.formData.selectName) {
                //     data.formData.saleTaskId = 0
                //     data.formData.taskName = ''
                //     data.formData.saleTaskNo = ''
                // }
                // if (data.formData.saleTaskNo) {
                //     data.formData.selectName = data.formData.saleTaskNo
                // }
            }

            const taskFocus = () => {
                // data.chancePop.openPopover()
                data.taskDialog.openDialog()
                data.refInput.blur()
            }

            const taskClear = () => {
                data.formData.saleTaskId = 0
                data.formData.allocationAgentId = 0
                data.formData.saleTaskNo = ''
            }

            const close = () => {
                data.dialogShow = false
                data.formData = {
                    contactName:'',
                    contactPhone:'',
                    clueSource:'',
                    company:'',
                    provinceCode:'',
                    cityCode:'',
                    areaCode:'',
                    area:[],
                    address:'',
                    saleTaskId:'',
                }
                setTimeout(() => {
                    data.refForm.clearValidate();
                }, 500);
            }

            const confirm = () => {
                data.refForm.validate((val) => {
                    if (val) {
                        const a = { ...data.formData }
                        a.saleTaskId = Number(a.saleTaskId)

                        api.task.TASK_CLUE_CREATE(a)
                            .then((res) => {
                                if (!res.code) {
                                    currentInstance.proxy.customMessage({
                                        type: 'success',
                                        message: '提交成功',
                                    })

                                    emit('success')

                                    close()
                                }else{
                                    currentInstance.proxy.customMessage({
                                        name:'error',message:res.msg
                                    })
                                }
                            })
                    }
                })
            }

            const open = () => {
                data.dialogShow = true
            }

            return{
                ...toRefs(data),
                rule,
                sourceOption,
                citys,

                close,
                confirm,
                areaChange,
                open,
                taskBlur,
                taskFocus,
                taskClear,
                taskConfirm,
            }
        }
    })
</script>

<style scoped>

</style>
